/*
 * @Description: 订单校验规则页面
 * @Version: 1.0
 * @Autor: c-jack.qian
 * @Date: 2020-10-21 17:30:52
 * @LastEditors: c-jack.qian
 * @LastEditTime: 2021-04-25 11:58:35
 */

import { DataSet, notification, Table } from 'choerodon-ui/pro/lib';
import { ColumnAlign, TableColumnTooltip } from 'choerodon-ui/pro/lib/table/enum';
import styles from '../index.less';
import { Renderer } from 'choerodon-ui/pro/lib/field/FormField';
import React, { FC, useMemo } from 'react';
import intl from 'utils/intl';

import { connect } from 'dva';



notification.config({
  duration: 3,
  placement: 'bottomRight',
});
interface propstype {
  dispatch: any;
  tableDS: DataSet;
}

const ClassPage: React.FC<propstype> = ({tableDS}) => {

  const approvalColumns = useMemo<any>(
    () => [
      {
        name: '',
        renderer: renderIcon as Renderer,
        align: ColumnAlign.center,
        width: 100,
        style: { padding: 0 },
        className: styles.iconColumun,
      },
      {
        name: 'NodeName',
        tooltip: TableColumnTooltip.always,
      },
      {
        name: 'Approver',
        tooltip: TableColumnTooltip.always,
      },
      {
        name: 'ApprovalStatus',
        tooltip: TableColumnTooltip.always,
      },
      {
        name: 'ApprovalContent',
        width: 150,
        tooltip: TableColumnTooltip.always,
      },
      {
        name: 'CreateTime',
        tooltip: TableColumnTooltip.always,
      },
    ],
    []
  );

  const ImgIcon: FC<{ status: string }> = props => {
    const imgObj = {
      审批同意: require('@src/assets/icons/success.png'),
      提交成功: require('@src/assets/icons/success.png'),
      重新提交成功: require('@src/assets/icons/success.png'),
      同意成功: require('@src/assets/icons/success.png'),
      驳回成功: require('@src/assets/icons/reject.png'),
      流程关闭成功: require('@src/assets/icons/flow-close.svg'),
      驳回: require('@src/assets/icons/reject.png'),
      补签成功: require('@src/assets/icons/buqian.png'),
      撤回成功: require('@src/assets/icons/reback.png'),
      撤回申请成功: require('@src/assets/icons/reback.png'),
      转办成功: require('@src/assets/icons/transfer.png'),
      进行中: require('@src/assets/icons/ongoing.png'),
      未开始: require('@src/assets/icons/nostart.png'),
    };
    return <img src={imgObj[props.status || '进行中']} alt="" width="18" />;
  };

  const renderIcon = ({ record }) => {
    const { index } = record;
    const status = record.get('ApprovalStatus');
    const recordLength = record.dataSet.length;

    return (
      <div style={{ height: 40 }}>
        <div>
          <ImgIcon status={status} />
        </div>
        {index !== recordLength - 1 && <div className={styles.approvalLine} />}
      </div>
    );
  };

  return (
    <Table
      dataSet={tableDS}
      border
      columns={approvalColumns}
      header={intl.get('dji.otc.om.view.field.approvalProcess').d('审批流程')}
    />
  );
};

export default connect()(ClassPage);
